<template>
	<!-- 低卡信息加客户 -->
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<!-- 无数据 -->
		<view class="dl-view flex">
			<view class="dt-view m-r-14">
				<text class="underline blue" @click="isLikeShow = true">{{ bottomCardVoList.comegoTypeName }}</text>
			</view>
			<view class="dd-view">
				<text v-if="!bottomCardVoList.comegoId && !bottomCardVoList.comegoName" class="grey"
					@click="selectData">请选择{{ bottomCardVoList.comegoTypeName }}</text>

				<view v-else class="dd-view flex">
					<text class="" @click="selectData">{{ bottomCardVoList.comegoName }}</text>
					<view class="switch flex">
						<u-switch v-model="bottomCardVoList.isMain" size="14"></u-switch>
						<text class="m-l-10">主要</text>
					</view>
				</view>
			</view>
		</view>
		<view class="ul-view" v-if="bottomCardVoList.comegoId && bottomCardVoList.comegoName">
			<view class="li-view">
				<view class="l-text">
					辅助编号
				</view>
				<view class="r-con m-l-10 flex">
					<u--input fontSize="14" v-model="bottomCardVoList.auxiliaryCode" border="none"></u--input>
				</view>
			</view>
			<view class="li-view">
				<view class="l-text">
					辅助名称
				</view>
				<view class="r-con m-l-10 flex">
					<u--input fontSize="14" v-model="bottomCardVoList.auxiliaryName" border="none"></u--input>
				</view>
			</view>
			<view class="li-view"
				@click="goRoute('/pages/application/pages/information/product-category/components/pricing-unit')">
				<view class="l-text">
					计量单位
				</view>
				<view class="r-con m-l-10 unit flex">
					<text>{{ bottomCardVoList.unitName }}</text>
					<u-icon name="arrow-right" size="10" color="#999"></u-icon>
				</view>
			</view>
			<view class="li-view"
				@click="goRoute('/pages/application/pages/information/product-category/components/goods-supply-type')">
				<view class="l-text">
					供货
				</view>
				<view class="r-con m-l-10 flex">
					{{ bottomCardVoList.supplyTypeName }}
				</view>
			</view>
			<view class="li-view">
				<view class="l-text">
					备注
				</view>
				<view class="r-con flex">
					<u--input fontSize="14" border="none"></u--input>
				</view>
			</view>
		</view>
		<!-- <view class="ul-view m-t-6">
			<view class="li-view" style="border:none;">
				<view class="l-text">
					<text class="grey">批量设置</text>
				</view>
				<view class="r-con unit flex">
					<u--input placeholder="请输入统一价格" border="none" inputAlign="right" fontSize="14" color="#f00"></u--input>
					<text class="m-l-10 grey">/ 米</text>
				</view>
			</view>
		</view>
		<view class="table-view m-t-6 m-b-20">
			<view class="th-view m-b-40">
				<view class="td-view grey">
					颜色
				</view>
				<view class="td-view grey">
					对方叫法
				</view>
				<view class="td-view grey">
					价格
				</view>
			</view>
			<view class="tr-view">
				<view class="td-view">
					白坯#
				</view>
				<view class="td-view">
					<view @click="onBatchShow()">
						<u-icon name="edit-pen" color="#999" size="28"></u-icon>
					</view>
				</view>
				<view class="td-view">
					<view class="inp-box">
						<u--input fontSize="14" border="none" color="#f00" inputAlign="center" v-model="color"></u--input>
						<text>/米</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 客户选择弹框 -->
		<u-popup :show="isLikeShow" mode="center" :round="5" @close="onLikeClose" :closeOnClickOverlay="true">
			<view class="pop-ul">
				<view class="pop-li" :class="{ 'active': bottomCardVoList.comegoType == item.value }"
					v-for="(item, index) in optList" :key="index" @click="onCheck(item)">
					<u-icon name="checkbox-mark" color="#fff" class="m-r-20" size="24"
						v-if="bottomCardVoList.comegoType == item.value"></u-icon>
					{{ item.label }}
				</view>
			</view>
		</u-popup>

		<!-- 对方叫法弹框 -->
		<u-popup :show="batchShow" :round="10" :closeOnClickOverlay="false" mode="center">
			<view class="popup-view">
				<view class="title">
					对方叫法
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="label">
							色号
						</view>
						<view class="value flex">
							<u--input border="surround" v-model="batchParams.startNumber"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							名称
						</view>
						<view class="value">
							<u--input border="surround" v-model="batchParams.prefix"></u--input>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onBatchCencal">
						取消
					</view>
					<view class="btn" @click="onBatchConfirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { comeGoType } from "@/apis/bill/payment-order";
export default {
	components: {
		clIcon,
	},
	data() {
		return {
			optList: [],
			config: {
				title: "底卡信息",
				color: "#ffffff",
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				rightButton: [
					// {
					//   key: "btn1",
					//   icon: "&#xe727;",
					//   position: "left",
					// },
				],
			},
			value: true,
			color: 0,
			isLikeShow: false,
			bottomCardVoList: {
				comegoTypeName: "", // 左侧弹窗选择
				comegoType: "", //	 左侧弹窗选择

				unitName: "", //计量单位Name瓶
				unitId: "", //计量单位ID
				supplyTypeName: "", //供货类型
				supplyTypeId: "", //供货类型id

				remarks: "", //备注
				isMain: false, //是否主要
				auxiliaryCode: "", //辅助编号
				auxiliaryName: "", //辅助名称
				comegoId: "", //客/供/加:
				comegoName: "", //客/供/加:
			},
			batchShow: false,
			batchParams: {},
			type:{}
		};
	},
	// 页面周期函数--监听页面加载
	onLoad(option) {
		if (option.item) {
			this.bottomCardVoList = Object.assign(this.bottomCardVoList,option.item)
		}
		if (option.type) {
			this.type = option.type
		}
		this.getComeGoType()
		// 单位
		uni.$on('on-pricing-unit', data => {
			this.bottomCardVoList.unitName = data.label
			this.bottomCardVoList.unitId = data.value
		})
		// 供货类型
		uni.$on('on-goods-supply-type', data => {
			this.bottomCardVoList.supplyTypeName = data.label
			this.bottomCardVoList.supplyTypeId = data.id
		})

	},
	methods: {
		// 路由跳转
		goRoute(url) {
			this.$Router.push({
				path: url
			});
		},
		// 显示当前展示的左侧列表
		selectData() {
			switch (this.bottomCardVoList.comegoType) {
				case 0:
					// 客户
					uni.$on('pushCustomDetails', data => {
						this.bottomCardVoList.comegoId = data.id
						this.bottomCardVoList.comegoName = data.name
					})
					this.$Router.push({
						path: '/pages/application/pages/personnel/custom/custom',
						query: { isJump: true }
					});
					break;
				case 1:
					// 供应商
					uni.$on('settlementComego', data => {
						this.bottomCardVoList.comegoId = data.id
						this.bottomCardVoList.comegoName = data.name
					})
					this.$Router.push({
						path: '/pages/application/pages/personnel/supplier/supplier?type=thjs&page=thjs',
					});
					break;
				case 2:
					// 加工商
					uni.$on('on-converter-data', data => {
						this.bottomCardVoList.comegoId = data.id
						this.bottomCardVoList.comegoName = data.name
					})
					this.$Router.push({
						path: '/pages/application/pages/cloth/converter/index?type=list',
					});

					break;
				case 3:
					this.$refs.uToast.show({
						type: 'error',
						title: '默认主题',
						message: "暂时没有物流",
						complete() { }
					})
					break;
				default:
					break;
			}
		},
		// 显示客户置
		onLikeSet() {
			this.isLikeShow = true;
		},
		// 获取供应商opts
		getComeGoType() {
			comeGoType().then(res => {
				if (!res.flag) return;
				this.optList = res.data;
				this.bottomCardVoList.comegoTypeName = this.optList[0].label;
				this.bottomCardVoList.comegoType = this.optList[0].value;
			})
		},
		// 设置客户设置
		onCheck(val) {
			this.bottomCardVoList.comegoTypeName = val.label;
			this.bottomCardVoList.comegoType = val.value;
			this.bottomCardVoList.comegoId = ''
			this.bottomCardVoList.comegoName = ''
			this.onLikeClose()
		},
		onLikeClose() {
			this.isLikeShow = false;
		},
		clickBtn(item) {
			if (item.key === "btn1") {
				this.$Router.push({
					path: "/pages/application/pages/information/product-information/detail/components/low-calorie/add-low-calorie",
				});
			}
		},
		scrolltolower(e) {
			// 到底了
		},

		onBatchShow() {
			this.batchShow = true;
		},
		onBatchCencal() {
			this.batchShow = false;
			this.onReset()
		},
		// 重置
		onReset() {
			this.batchParams = {}
		},
		onBatchConfirm() { },
		toDetail() {
			this.$Router.push({
				path: "/pages/application/pages/information/product-information/detail/components/low-calorie/low-calorie-list-detail",
			});
		}
	},
	beforeDestroy() {
		if (this.bottomCardVoList.comegoId && this.bottomCardVoList.comegoName) {
			uni.$emit('on-add-low-calorie', this.bottomCardVoList,this.type)
		}
		uni.$off("on-pricing-unit");
		uni.$off("on-goods-supply-type");
	},
};
</script>

<style lang="scss" scoped>
.ulist {
	position: absolute;
	top: 5%;
}

.dl-view {
	background-color: #fff;
	padding: 0 20rpx;
	height: 80rpx;
	align-items: center;
	border-bottom: 1rpx solid #eee;

	.dt-view {
		width: 110rpx;
		text-align: right;
	}

	.dd-view {
		flex: 1;
		justify-content: space-between;

		.switch {
			align-items: center;
		}
	}
}

.ul-view {
	overflow: hidden;

	.li-view {
		display: flex;
		align-items: center;
		padding: 14rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.l-text {
			text-align: right;
			width: 120rpx;
		}

		.r-con {
			flex: 1;
			justify-content: space-between;
		}

		.unit {
			justify-content: flex-end;
			color: #666;
			align-items: center;
		}
	}
}

.img-view {
	background-color: #fff;
	padding: 20rpx;

	.img-item {
		position: relative;
	}
}

.table-view {
	background-color: #fff;
	padding: 20rpx;

	.th-view,
	.tr-view {
		display: flex;
	}

	.td-view {
		flex: 1;
		display: flex;
		justify-content: center;

		.inp-box {
			display: flex;
			align-items: center;
		}
	}
}

// list style
.list-view {
	.list-item {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 1rpx;
		display: flex;
		justify-content: space-between;

		.con-view {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.bot-view {
				color: #f00;
			}
		}

		.main-icon {
			text-indent: -9999rem;
			width: 10rpx;
			height: 10rpx;
			border-radius: 100%;
			background: #409eff;
		}
	}
}
</style>
